// $__AUI_COLORPICKER_SELECTOR: ".#{$aui-ns}-colorpicker";

.aui-colorpicker{
    width: 200px;
    height: 300px;
    position: relative;
    background-color: #eeeeee;

    &__sel {
      position: absolute;
      box-sizing: content-box;
      top: -3px;
      left: -3px;
      width: 6px;
      height: 6px;
      border-radius:50%;
      background: transparent;
      border: 0.8px solid #fafafa;
      box-shadow: 0 0 1px rgba(0,0,0, 0.8);
    }
    
    &__col1, &__col2 {
      width: 180px;
      height: 180px;
      position: absolute;
      top: 10px;
      left: 10px;
    }
    
    &__col1 {
      background: hsl(150, 100%, 50%)
    }

    &__col2 {
      background: 
      linear-gradient(to bottom, transparent, #000),
      linear-gradient(to right, #fff, transparent);
    }
    
    &__hue {
      width: 180px;
      height: 10px;
      position: absolute;
      top: 200px;
      left: 10px;
      background: linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);
    }
    
    &__colpreview {
      width: 180px;
      height: 30px;
      position: absolute;
      top: 220px;
      left: 10px;
    }
    
    &__output{
      width: 180px;
      height: 26px;
      position: absolute;
      top: 260px;
      left: 10px;
      text-align: center;
      border: none;
      background: transparent;
    }
  }